import 'package:flutter/material.dart';
import 'package:music_pc/models/custom_tab.dart';
import 'package:music_pc/pages/music/index.dart';
import 'package:music_pc/utils/assets.dart';

class RootPage extends StatefulWidget {
  const RootPage({super.key});

  @override
  State<RootPage> createState() => _RootPageState();
}

class _RootPageState extends State<RootPage>
    with SingleTickerProviderStateMixin {
  late TabController _tabController;

  int rootIndex = 0;

  final List<CustomTab> tab = [
    CustomTab(
      label: "音乐",
      icon: Assets.AssetsTabMusic,
      color: Colors.white70,
      activeColor: Color(0xff489CF5),
      child: MusicPage(),
    ),
    CustomTab(
      label: "视频",
      icon: Assets.AssetsTabVideo,
      color: Colors.white70,
      activeColor: Color(0xff489CF5),
      child: Container(),
    ),
    CustomTab(
      label: "音乐",
      icon: Assets.AssetsTabMy,
      color: Colors.white70,
      activeColor: Color(0xff489CF5),
      child: Container(),
    ),
  ];

  @override
  void initState() {
    super.initState();
    _tabController = TabController(
      length: tab.length,
      vsync: this,
      initialIndex: rootIndex,
      animationDuration: Duration.zero,
    );
    _tabController.addListener(() {
      setState(() {
        rootIndex = _tabController.index;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0xff212227),
      body: Stack(
        children: [
          Positioned.fill(
            left: 0,
            top: 0,
            child: Row(
              mainAxisSize: MainAxisSize.max,
              children: [
                //左侧导航
                SizedBox(
                  width: 105,
                  height: double.maxFinite,
                  child: Column(
                    children: [
                      Container(
                        margin: EdgeInsets.only(top: 40),
                        width: 60,
                        height: 60,
                        child: ClipOval(
                          child: Image.asset(Assets.AssetsDefaultHead),
                        ),
                      ),
                      Expanded(
                        child: Flex(
                          direction: Axis.vertical,
                          mainAxisAlignment: MainAxisAlignment.center,
                          spacing: 30,
                          children: tab.asMap().keys.map((index) {
                            final item = tab[index];
                            return TextButton(
                              onPressed: () => _tabController.animateTo(index),
                              child: Padding(
                                padding: EdgeInsets.all(5),
                                child: Column(
                                  children: [
                                    Image.asset(
                                      item.icon,
                                      width: 30,
                                      height: 30,
                                      color: rootIndex == index
                                          ? item.activeColor
                                          : item.color,
                                    ),
                                    Text(
                                      item.label,
                                      style: TextStyle(
                                        fontSize: 12,
                                        height: 22 / 12,
                                        color: rootIndex == index
                                            ? item.activeColor
                                            : item.color,
                                      ),
                                    ),
                                  ],
                                ),
                              ),
                            );
                          }).toList(),
                        ),
                      ),
                      SizedBox(height: 70),
                    ],
                  ),
                ),
                //右侧内容区域
                Expanded(
                  child: TabBarView(
                    controller: _tabController,
                    children: tab.map((item) => item.child).toList(),
                  ),
                ),
              ],
            ),
          ),
          Positioned(child: Container()),
        ],
      ),
    );
  }
}
